<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Postman模拟页面</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../css/element.css" />
    <script src="../js/vue.js"></script>
    <script src="../js/element.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/utils.js" type="module"></script>
    <style>
      #app {
        padding: 20px;
      }

      .content-title {
        text-align: center;
        font-size: 20px;
      }

      .header-row {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
      }

      .header-row .el-input-group__append {
        cursor: pointer;
      }

      .el-input {
        margin-right: 10px;
        width: 270px;
        vertical-align: top;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <h1 class="content-title">Postman模拟页面</h1>
      <el-button @click="getChannel">栏目列表</el-button>
      <el-button @click="getArticle">文章列表</el-button>
      <el-form ref="form" :model="requestData" label-width="120px">
        <el-form-item label="URL">
          <el-input
            v-model="requestData.url"
            placeholder="请输入接口URL"
          ></el-input>
        </el-form-item>
        <el-form-item label="请求方式">
          <el-select v-model="requestData.method">
            <el-option label="GET" value="GET"></el-option>
            <el-option label="POST" value="POST"></el-option>
            <el-option label="PUT" value="PUT"></el-option>
            <el-option label="DELETE" value="DELETE"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Header">
          <div
            v-for="(item, index) in requestData.headers"
            :key="index"
            class="header-row"
          >
            <el-input
              v-model="item.key"
              placeholder="Key"
              style="width: 200px"
            ></el-input>
            <el-input v-model="item.value" placeholder="Value"></el-input>
            <el-button icon="el-icon-plus" @click="addHeader"></el-button>
            <el-button
              icon="el-icon-minus"
              @click="removeHeader(index)"
              v-if="requestData.headers.length>1"
            ></el-button>
          </div>
        </el-form-item>
        <el-form-item label="Params">
          <el-input
            v-model="requestData.params"
            type="textarea"
            placeholder="请输入Params信息"
            :autosize="{ minRows: 4, maxRows: 10}"
          ></el-input>
        </el-form-item>
        <el-form-item label="Data">
          <el-input
            v-model="requestData.data"
            type="textarea"
            placeholder="请输入请求体数据"
            :autosize="{ minRows: 4, maxRows: 10}"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="压力测试时长">
          <el-input v-model.number="duration" placeholder="请输入压力测试时长">
            <template slot="append">秒</template>
          </el-input>
        </el-form-item>
        <el-form-item label="每秒请求数">
          <el-input
            v-model.number="requestsPerSecond"
            placeholder="请输入每秒请求数"
          >
            <template slot="append">次</template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="startTesting" :loading="loading"
            >开始测试</el-button
          >
          <el-button @click="stopTesting">停止测试</el-button>
          <el-button @click="handleCopy">复制结果</el-button>
        </el-form-item>

        <el-form-item label="返回结果">
          <el-input
            v-model="responseResult"
            type="textarea"
            readonly
            :autosize="{ minRows: 6, maxRows: 20}"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <script src="./index.js"></script>
  </body>
</html>
